import 'package:flutter/material.dart';

import '../../res/listData.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("GridView实现网格布局"),
        ),
        body: const HomePage(),
      ),
    );
  }
}

// GridView.count 实现动态列表
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    var tempList= listData.map((value){
      return Container(
        decoration: BoxDecoration(
            border: Border.all(
                color:const Color.fromRGBO(233, 233,233, 0.9),
                width: 1
            )
        ),
        child:Column(
          children: <Widget>[
            Image.asset(value['imageUrl']),
            const SizedBox(height: 12),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style:   const TextStyle(
                  fontSize: 20
              ),
            )
          ],
        ),

      );

    });
// ('xxx','xxx')
    return tempList.toList();
  }


  @override
  Widget build(BuildContext context) {
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: const EdgeInsets.all(10),
      crossAxisCount: 2,  //一行的 Widget 数量
// childAspectRatio:0.7,  //宽度和高度的比例
      children: _getListData(),
    );
  }
}